<template>
  <div class="container">
    <Breadcrumb
      :items="['menu.visualization', 'menu.visualization.dataAnalysis']"
    />
    <a-space direction="vertical" :size="12" fill>
      <a-space direction="vertical" :size="16" fill>
        <div class="space-unit">
          <!-- 头部 -->
          <PublicOpinion />
        </div>
        <div>
          <a-grid :cols="24" :col-gap="16" :row-gap="16">
            <a-grid-item
              :span="{ xs: 24, sm: 24, md: 24, lg: 24, xl: 16, xxl: 16 }"
            >
              <ContentPublishRatio />
            </a-grid-item>
            <a-grid-item
              :span="{ xs: 24, sm: 24, md: 24, lg: 24, xl: 8, xxl: 8 }"
            >
              <!-- 设备总览 -->
              <PopularAuthor />
            </a-grid-item>
          </a-grid>
        </div>
        <div>
          <!-- <ContentPeriodAnalysis /> -->
          <div>
            <a-grid :cols="24" :col-gap="16" :row-gap="16">
              <a-grid-item
                :span="{ xs: 24, sm: 24, md: 24, lg: 12, xl: 12, xxl: 12 }"
              >
                <a-spin :loading="loading" style="width: 100%">
                  <a-card
                    class="general-card"
                    :header-style="{ paddingBottom: '14px' }"
                  >
                    <template #title> 传感器报警（数量） </template>
                    <VueECharts
                      :option="lineOption"
                      :autoresize="true"
                      style="width: 100%; height: 300px"
                    />
                    <!-- 结束饼图 -->
                  </a-card>
                </a-spin>
              </a-grid-item>
              <a-grid-item
                :span="{ xs: 24, sm: 24, md: 24, lg: 12, xl: 12, xxl: 12 }"
              >
                <a-spin :loading="loading" style="width: 100%">
                  <a-card
                    class="general-card"
                    :header-style="{ paddingBottom: '14px' }"
                  >
                    <template #title> 位移器报警（数量） </template>
                    <VueECharts
                      :option="lineOption2"
                      :autoresize="true"
                      style="width: 100%; height: 300px"
                    />
                    <!-- 结束饼图 -->
                  </a-card>
                </a-spin>
              </a-grid-item>
            </a-grid>
          </div>
        </div>
      </a-space>
    </a-space>
  </div>
</template>

<script lang="ts" setup>
  import { ref } from 'vue';
  import VueECharts from 'vue-echarts';
  import { use } from 'echarts/core';
  import {
    LegendComponent,
    TooltipComponent,
    GridComponent,
  } from 'echarts/components';
  import { LineChart } from 'echarts/charts';
  import { CanvasRenderer } from 'echarts/renderers';
  import type { EChartsOption } from 'echarts';
  // 新增：用于创建线性渐变
  import { graphic } from 'echarts';
  import PopularAuthor from './components/popular-author.vue';
  import ContentPublishRatio from './components/content-publish-ratio.vue';
  import ContentPeriodAnalysis from './components/content-period-analysis.vue';
  import PublicOpinion from './components/public-opinion.vue';

  use([
    LegendComponent,
    TooltipComponent,
    GridComponent,
    LineChart,
    CanvasRenderer,
  ]);

  const formatDate = (d: Date) => {
    const m = `${d.getMonth() + 1}`.padStart(2, '0');
    const day = `${d.getDate()}`.padStart(2, '0');
    return `${m}-${day}`;
  };
  const xData = Array.from({ length: 7 }, (_, i) => {
    const d = new Date();
    d.setDate(d.getDate() - (6 - i)); // 最近7天，按时间顺序
    return formatDate(d);
  });

  const lineOption = ref<EChartsOption>({
    tooltip: { trigger: 'axis' },
    legend: { top: 0, data: ['烟感', '温湿度'] },
    grid: { left: 40, right: 20, top: 40, bottom: 30 },
    xAxis: {
      type: 'category',
      boundaryGap: false,
      data: xData,
    },
    yAxis: { type: 'value' },
    series: [
      {
        name: '烟感',
        type: 'line',
        smooth: true,
        data: [2, 3, 1, 4, 2, 5, 3],
        showSymbol: false,
        lineStyle: { color: '#F28A2A', width: 2 },
        areaStyle: {
          color: new graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: 'rgba(242, 138, 42, 0.35)' },
            { offset: 1, color: 'rgba(242, 138, 42, 0.05)' },
          ]),
        },
      },
      {
        name: '温湿度',
        type: 'line',
        smooth: true,
        data: [30, 32, 31, 29, 33, 30, 34],
        showSymbol: false,
        lineStyle: { color: '#409EFF', width: 2 },
        areaStyle: {
          color: new graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: 'rgba(64, 158, 255, 0.30)' },
            { offset: 1, color: 'rgba(64, 158, 255, 0.05)' },
          ]),
        },
      },
    ],
  });

  // 新增：仅位移报警的折线图配置
  const lineOption2 = ref<EChartsOption>({
    tooltip: { trigger: 'axis' },
    legend: { top: 0, data: ['位移报警'] },
    grid: { left: 40, right: 20, top: 40, bottom: 30 },
    xAxis: {
      type: 'category',
      boundaryGap: false,
      data: xData,
    },
    yAxis: { type: 'value' },
    series: [
      {
        name: '位移报警',
        type: 'line',
        smooth: true,
        data: [1, 0, 2, 1, 3, 1, 2],
        showSymbol: false,
        // 采用绿色，避免与左侧图颜色重合
        lineStyle: { color: '#67C23A', width: 2 },
        areaStyle: {
          color: new graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: 'rgba(103, 194, 58, 0.30)' },
            { offset: 1, color: 'rgba(103, 194, 58, 0.05)' },
          ]),
        },
      },
    ],
  });
</script>

<script lang="ts">
  export default {
    name: 'DataAnalysis',
  };
</script>

<style scoped lang="less">
  .container {
    padding: 0 20px 20px 20px;
    margin-bottom: 20px;
  }

  .space-unit {
    background-color: var(--color-bg-2);
    border-radius: 4px;
  }

  .title-fix {
    margin: 0 0 12px 0;
    font-size: 14;
  }
  :deep(.section-title) {
    margin: 0 0 12px 0;
    font-size: 14px;
  }
</style>
